<script type="text/ecmascript-6">
    /**
     * Created by wcz on 2017/1/2.
     */
    import file from '../base/fileInput.vue'
    import b from '../bus'

    export default {
        data () {
            return {
                carIdPic: undefined,
                carNumber: '',
                popupVisible: false,
                imgUploadingPopupVisible: false,
                location: '',
                errTxt: '',
                rateOfImgUploadProcess: 100,
                timer: null,
                traceId: -1,
                imgUploading: false,
                geo: {},
                traceMatch: false
            }
        },
        computed: {
            uploadTip () {
                return this.imgUploading ? '后台上传图片中，勿关闭页面' : '图片上传成功';
            }
        },
        mounted () {
            this.changeTitle('车捕头-快速查车');
        },
        methods: {
            submitIntelligence () {
                if (!this.carIdPic) {
                    this.msg('请拍摄车辆照片', 1.3);
                    return
                }
                if (!this.carNumber) {
                    this.msg('请填写车牌号', 1.3);
                    return
                }
                const carNumberReg = /[\u4e00-\u9fa5]{1}[a-zA-Z]{1}(?:(?![a-zA-Z]{5})[0-9a-zA-z]){5}/;

                if (!carNumberReg.test(this.carNumber)){
                    this.msg('车牌号格式错误！');
                    return
                }

                let postData = new FormData();
                postData.append('car_number', this.carNumber);
                postData.append('fingerprint', `${window.longitude},${window.latitude}`);

                this.jax('/api/v1/traces', postData, {loading: true}).then(res => {
                    if (res.success) {
                        this.popupVisible = true;
                        this.traceId = res.data.trace;
                        this.traceMatch = res.data.match;
                        this.supplementImg(res.data.trace);
                    } else {
                        MessageBox('提示', res.message);
                    }

                })
            },
            submitLocation (){
                if (!this.location) {
                    this.errTxt = '请描述车辆位置信息';
                    return
                }
                let postData = new FormData();
                postData.append('location', this.location);

                this.jax(`/api/v1/traces/${this.traceId}/location`, postData).then(res => {
                    if (res.success) {
                        this.popupVisible = false;
                        this.errTxt       = '';
                        this.traceMatch ? MessageBox('提示',  '提交成功，请继续追踪该车！') : this.msg('提交成功!')
                    } else {
                        this.errTxt = res.message;
                    }
                    this.location  = '';
                })
            },
            supplementImg (traceId) {
                if (this.imgUploadingPopupVisible) {
                    return
                }

                let postData = new FormData();
                postData.append('car_photo', this.carIdPic);
                postData.append('trace_id', traceId);

                this.rateOfImgUploadProcess   = 0;
                this.imgUploadingPopupVisible = true;
                this.imgUploading             = true;
                this.timer                    = setInterval(() => this.rateOfImgUploadProcess++, 50);

                this.jax(`/api/v1/traces/${traceId}/files`, postData, {loading: 'ajaxLoading'}).then(res => {
                    if (res.success) {
                        this.rateOfImgUploadProcess = 100;
                        this.imgUploading           = false;
                        setTimeout(() => {
                            this.imgUploadingPopupVisible = false;
                        }, 500);

                    } else {
                        MessageBox('提示', res.message);
                        this.imgUploadingPopupVisible = false;
                    }
                });
            },
            getLocation () {
                if (!navigator.geolocation){
                    this.geo = null;
                    return;
                }

                navigator.geolocation.getCurrentPosition(position => {
                    let latitude  = position.coords.latitude;
                    let longitude = position.coords.longitude;
                    this.geo = {
                        latitude,
                        longitude
                    }
                }, () => {
                    this.msg('无法获取您的位置')
                });
            }
        },
        components: {
            file
        },
        watch: {
            rateOfImgUploadProcess (val) {
                if (val >= 60 && val < 80) {
                    clearInterval(this.timer);
                    this.timer = setInterval(() => this.rateOfImgUploadProcess++, 100);
                } else if (val >= 80 && val <= 95) {
                    clearInterval(this.timer);
                    this.timer = setInterval(() => this.rateOfImgUploadProcess++, 150);
                }
            }
        }
    };
</script>

<template>
    <div class="submit">
        <div class="submit__inner" layout="column center-center">

            <div class="submit__img" layout="row center-center">
                <file inputId="f1" :icon="true" v-model="carIdPic"></file>
            </div>
            <div class="submit__input">
                <mt-field label="车牌号" placeholder="例：浙A88888" v-model="carNumber"></mt-field>
            </div>
            <mt-button type="primary" class=" z1" size="large" @click="submitIntelligence">提交</mt-button>
        </div>
        <mt-popup
                class="cb__popup"
                v-model="popupVisible"
                position="right"
                layout="column top-center"
        >
            <i class="iconfont submit__success-icon" v-if="traceMatch">&#xe70c;</i>
            <i class="iconfont submit__success-icon submit__success--no" v-else>&#xe676;</i>
            <p class="submit__success" v-if="traceMatch">匹配成功,该车为可疑车辆!</p>
            <p class="submit__success submit__success--no" v-else>该车暂未匹配到任务</p>
            <div>
                <mt-field label="位置" placeholder="请详细描述车辆位置" v-model="location"></mt-field>
            </div>

            <p class="submit__more mt10" v-if="traceMatch">描述车辆位置后，请继续追踪该车。</p>
            <p class="submit__more" v-if="traceMatch">期间我们或与您主动联系，</p>
            <p class="submit__more" v-if="traceMatch">您也可主动联系我们: 0571-87001678</p>
            <p class="submit__more submit__more--err mt10">{{errTxt}}</p>

            <mt-button class="submit__popup-btn" type="primary" size="large" @click="submitLocation">提交</mt-button>
        </mt-popup>
        <mt-popup
                v-model="imgUploadingPopupVisible"
                position="top"
                :modal="false"
                class="cb__popup-top"
        >
            <mt-progress :value="rateOfImgUploadProcess" :bar-height="7">
            </mt-progress>
            <p class="submit__uploadtip" :class="{'twinkle': imgUploading}">{{uploadTip}}</p>
        </mt-popup>
    </div>
</template>